<template>
    <div>
        <canvas :width="WIDTH" :height="HEIGHT" ref="timerCav"></canvas>
    </div>
</template>

<script>
import {digit,colors} from './digit'
import { setInterval } from 'timers';
export default {
    name:"Timer",
    data () {
        return {          
            WIDTH:document.body.clientWidth,
            HEIGHT:parseInt(window.innerHeight)-8,
            Left:document.body.clientWidth/10,
            TOP:(parseInt(window.innerHeight)-8)/10,
            Balls:new Array(),
            Gap:20,
            R:3,
            curTime:null,
            context:null,
        }
    },
    mounted () {
        this.context=this.$refs.timerCav.getContext("2d");
        this.curTime=this.getCurTime();
        setInterval(() => {
            this.update()
            this.drawTime()
        }, 50);
        
    },
    methods: {
        update(){
            if(this.curTime.seconds%10!=this.getCurTime().seconds%10){
                this.addBalls(this.Left+128*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.seconds%10));
            }
            if(parseInt(this.curTime.seconds/10)!=parseInt(this.getCurTime().seconds/10)){
                this.addBalls(this.Left+120*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.seconds%10));
            }
            if(this.curTime.minutes%10!=this.getCurTime().minutes%10){
                this.addBalls(this.Left+108*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.minutes%10));
            }
            if(parseInt(this.curTime.minutes/10)!=parseInt(this.getCurTime().minutes/10)){
                this.addBalls(this.Left+100*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.minutes%10));
            }
            if(this.curTime.hours%10!=this.getCurTime().hours%10){
                this.addBalls(this.Left+88*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.hours%10));
            }
            if(parseInt(this.curTime.hours/10)!=parseInt(this.getCurTime().hours/10)){
                this.addBalls(this.Left+80*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.hours%10));
            }
            if(this.curTime.day%10!=this.getCurTime().day%10){
                this.addBalls(this.Left+56*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.day%10));
            }
            if(parseInt(this.curTime.day/10)!=parseInt(this.getCurTime().day/10)){
                this.addBalls(this.Left+64*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.day%10));
            }

            this.curTime=this.getCurTime()   
            this.updateBalls();
       },
        getCurTime(){
            let date=new Date()
            let year =date.getFullYear()
            let month=date.getMonth()+1
            let day=date.getDate()
            let hours=date.getHours()
            let minutes=date.getMinutes()
            let seconds=date.getSeconds()
            return {year,month,hours,day,minutes,seconds}
        },
        renderTime(x,y,r,num){           
            this.context.fillStyle='black';
            for(let i=0;i<digit[num].length;i++){
                for(let j=0;j<digit[num][i].length;j++){
                    if(digit[num][i][j]==1){
                    this.context.beginPath()
                    this.context.arc(x+2*(r+1)*j,y+2*(r+1)*i,r,0,2*Math.PI)
                    this.context.closePath()
                    this.context.fill()}
                }
            }
        },
        drawTime(){
            this.context.clearRect(0, 0, this.WIDTH, this.HEIGHT);
            //年
            this.renderTime(this.Left,this.TOP,this.R,Math.floor(this.curTime.year/1000))
            this.renderTime(this.Left+8*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.year/100%10))
            this.renderTime(this.Left+16*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.year/10%10))
            this.renderTime(this.Left+24*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.year%10))

            this.renderTime(this.Left+36*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.month/10))
            this.renderTime(this.Left+44*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.month%10))
            
            this.renderTime(this.Left+56*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.day/10))
            this.renderTime(this.Left+64*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.day%10))
       
            this.renderTime(this.Left+80*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.hours/10))
            this.renderTime(this.Left+88*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.hours%10))

            this.renderTime(this.Left+96*2*(this.R+1),this.TOP,this.R,10)

            this.renderTime(this.Left+100*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.minutes/10))
            this.renderTime(this.Left+108*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.minutes%10))

            this.renderTime(this.Left+116*2*(this.R+1),this.TOP,this.R,10)

            this.renderTime(this.Left+120*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.seconds/10))
            this.renderTime(this.Left+128*2*(this.R+1),this.TOP,this.R,Math.floor(this.curTime.seconds%10))

            this.drawBalls();
       },
       addBalls(x,y,r,num){
            for(let i=0;i<digit[num].length;i++){
                for(let j=0;j<digit[num][i].length;j++){
                    this.Balls.push({
                        x:x+2*(r+1)*j,
                        y:y+2*(r+1)*i,
                        r:r,
                        g:Math.floor(Math.random()*2)+1,
                        vx:Math.ceil(Math.random()*5)*Math.pow(-1,Math.ceil(Math.random()*10)),
                        vy:Math.floor(Math.random()*4)*Math.pow(-1,Math.ceil(Math.random()*10)),
                        color: colors[Math.floor(Math.random() * colors.length)]
                    })
                }
            }
       },
       updateBalls(){
           for(let i=0;i<this.Balls.length;i++){
               this.Balls[i].x+=this.Balls[i].vx
               this.Balls[i].y+=this.Balls[i].vy
               this.Balls[i].vy+=this.Balls[i].g
               if(this.Balls[i].y>=this.HEIGHT-this.R){
                   this.Balls[i].y=this.HEIGHT-this.R
                   this.Balls[i].vy = -this.Balls[i].vy * 0.75
               }
           }
           var index=0
            for(let i=0;i<this.Balls.length;i++){
                if(this.Balls[i].x>-this.R && this.Balls[i].x<this.R+this.WIDTH){
                   this.Balls[index++]=this.Balls[i]
               }
            }
            this.Balls.length=index;
       },
       drawBalls(){
           console.log(this.Balls.length)
           for(let i=0;i<this.Balls.length;i++){
                    this.context.fillStyle=this.Balls[i].color;
                    this.context.beginPath()
                    this.context.arc(this.Balls[i].x,this.Balls[i].y,this.Balls[i].r,0,2*Math.PI)
                    this.context.closePath()
                    this.context.fill()
           }
       }
    }
}
</script>

<style lang="stylus" scoped>
    div 
        color:red
</style>

 